<template>
<div>

<el-card class="box-card" >
	<div slot="header" class="clearfix">
		<span>人员在线情况</span>
	</div>
<el-container :style="{width : offsetwidth + 'px', height : offsetheight + 'px'}">
	<el-aside :width="offsetwidth + 'px'">

		<!-- <vue-ztree :list.sync='treedata' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='showTree'></vue-ztree> -->
		
		<el-tree :data="treedata" 
		:expand-on-click-node="false"
		:default-expand-all="true"
		class="tree"
		node-key="id"
		:props="props1"
		v-if="showTree"
		:indent="20"
		:style="{height : offsetheight + 'px'}"
		>
			<span class="custom-tree-node" slot-scope="{ node, data }">
		        <span style="width:150px;"> 

		        <i v-if="data.type == '0'" class="el-icon-s-order h3" style="color:#2197d8;"></i> 
		        <i v-if="data.type == '1'" class="el-icon-s-order h3" style="color:#c26d9d"></i> 
		        <i v-if="parseInt(data.type) > 1" class="el-icon-s-order h3" style="color:#a12c31"></i> 
		        {{ node.label }}</span>
		        <!-- <span :style="{width : offsetwidth - 250 + 'px', }" style="overflow-x:auto;"> -->
		       	<span>
		        	<el-tag 
		        	v-for="(item, index) in data.names" :key="index"
		        	v-if="index < 7"
		        	:type="data.statues[index] == '1' ? 'success' : 'info'" 
		        	class="ml10" size="mini" >{{item}}</el-tag>
		        	<el-tag v-if="data.names.length > 7" class="ml10" size="mini"
		        	 @click="more(data)">查看更多</el-tag>
		        </span>
	        </span>

		</el-tree>
	</el-aside>
	<!-- <el-main >
111111 -->
		<!-- <position></position> -->

		<!-- <el-tabs v-model="activeName2" type="card" v-if="show" >
			<el-tab-pane label="网格信息" name="first">
				<gride :obj="currentGride"></gride>
			</el-tab-pane>
			<el-tab-pane label="人员信息" name="second">
				<user :obj="currentGride"></user>
			</el-tab-pane>
			<el-tab-pane label="企业信息" name="third">
				<unloading :obj="currentGride" :gridarr="treedata"></unloading>
			</el-tab-pane>
			<el-tab-pane label="执行部门信息" name="fourth">
				<member :obj="currentGride"></member>
			</el-tab-pane>
		</el-tabs> -->

	<!-- </el-main> -->
</el-container>
</el-card>

<el-dialog
  :title="current.company_name"
  :visible.sync="dialogVisible"
  width="600px">
  
  	<el-tag 
	v-for="(item, index) in current.names" :key="index"
	:type="current.statues[index] == '1' ? 'success' : 'info'" 
	class="ml10 mb10"  >{{item}}</el-tag>

  	<br>
  	<br>

</el-dialog>

</div>
</template>

<script>


export default {
	
	name : 'test',
	
	data () {
		return {
		  	treedata : [],

		  	offsetheight : document.documentElement.clientHeight - 60 - 20 - 20,    //
			offsetwidth : document.documentElement.clientWidth - 200 - 50,
			props1 : {
				label : 'company_name',
			},
			showTree : false,
			top : {}, 

			dialogVisible : false,

			current : {},
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		init () {
			this.$http({
				fun : 'staffonlinelist',
				cb : res => {
					console.log('staffonlinelist');
					console.log(res);

					res.forEach(item => {
						item.names = [];
						if(item.name != undefined){
							item.name.split(',').forEach(n => {
								item.names.push(n);
							});
						}
						
						item.statues = [];
						if(item.status != undefined){
							item.status.split(',').forEach(n => {
								item.statues.push(n);
							});
						}
					});

					const result = this.$util.transData(res, 'grid_id', 'parent_id', 'children');
					console.log(result);
					// this.top = result[0];
					this.treedata = result;
					this.showTree = true;

				}
			});
		},


		more (data) {
			console.log(data);
			this.current = data;
			this.dialogVisible = true;
		},

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    justify-content: flex-start;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
